<template>
  <div class="moment-main" v-if="isDelete">
    <a href="javascript:" @click="goto">
      <img class="group_logo" :src="moment.avatar" alt="头像">
    </a>
    <div class="moment">
      <!--<div> &#45;&#45;{{moment.user_id}}&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;{{User_id}}-&#45;&#45;</div>-->
      <div class="del_btn" v-if="moment.user_id==User_id&&moment.group_id===0" @click="del(moment)"><i
        class="iconfont ls-shanchu"></i>
      </div>
      <div class="option" v-if="moment.group_id!==0">操作
        <ul class="top_menu">
          <li @click="changeSta(1,moment.id)">公开可见</li>
          <li @click="changeSta(2,moment.id)">仅小组内</li>
          <li @click="del(moment)">删除</li>
        </ul>
      </div>
      <!--发的人的姓名-->
      <span class="user_name" v-if="moment.group_id===0"><a href="javascript:"
                                                            @click="goto"><b>{{moment.name}}</b></a></span>
      <span class="user_name" v-if="moment.group_id!==0"><a href="javascript:"
                                                            @click="goto"><b>{{moment.group_name}}</b></a><span
        style="font-size: 0.8em;margin-left: 6px">来自{{moment.name}}</span></span>
      <!--时间-->
      <div class="time">{{moment.update_time}}</div>
      <!--文字-->
      <div class="content_detail">{{moment.content}}</div>
      <!--图片-->
      <ul class="img-container" v-if="moment.Images">
        <li v-for="item in moment.Images">
          <img :src=getUrl(item.img_url)
               alt="">
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { getImageUrl, delPost, changeStatus } from '../../public/api'

  export default {
    props: ['moment'],
    data () {
      return {
        isDelete: true
      }
    },
    methods: {
      getUrl: getImageUrl,
      goto () {
        this.$router.push({name: 'main', params: {role: this.moment.user_id}})
      },
      del (moment) {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPost({
            post_id: moment.id
          }).then(
            data => {
              if (data.status) {
                this.$message.success('删除成功')
                this.$emit('hasDelete')
                this.isDelete = false
              }
            }
          ).catch(msg => {
            this.$message.error('已经被删除或者删除错误')
          })
        }).catch(data => {})
      },
      changeSta (a, id) {
        changeStatus({status: a, post_id: id}).then(
          data => {
            console.log(data)
            this.$message.success('成功')
          }
        ).catch(data => {})
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>

<style scoped>
  .moment-main {
    background: #fff;
    width: 560px;
    padding: 20px 20px 4px;
  }

  .moment {
    width: 500px;
    margin-left: 60px;
  }

  .moment .time {
    font-size: 0.8em;
    margin: 5px 0;
    color: #808080;
  }

  .moment-main img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
  }

  .img-container img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  .img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .img-container li {
    overflow: hidden;
    margin: 2px;
    flex: 1;
    min-width: 160px;
  }

  .img-container li:first-child:nth-last-child(4), .img-container li:first-child:nth-last-child(4) ~ li {
    /*4项时*/
    min-width: 240px;
  }

  .img-container li:first-child:nth-last-child(n+5):nth-last-child(-n+9),
  .img-container li:first-child:nth-last-child(n+5):nth-last-child(-n+9) ~ li {
    /* 当列表包含5～9项时，命中所有列表项 */
    width: 162px;
    height: 162px;
    flex: 0;
  }

  .img-container li:first-child:nth-last-child(n+3):nth-last-child(-n+9),
  .img-container li:first-child:nth-last-child(n+3):nth-last-child(-n+9) ~ li {
    /* 当列表包含5～9项时，命中所有列表项 */
    width: 162px;

    flex: 0;
  }

  .del_btn {
    float: right;
    color: red;
    font-size: 25px;
  }

  .option {
    float: right;
    text-align: right;
    height: 20px;
  }

  .option:hover {
    cursor: pointer;
  }

  .del_btn:hover {
    cursor: pointer;
  }

  .top_menu {
    position: relative;
    visibility: hidden;
    width: 90px;
    box-shadow: 0 0 8px 2px #0000002b;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
  }

  .option:hover .top_menu {

    visibility: visible;
  }

  .top_menu li:hover {
    cursor: pointer;
    background: #0000001c;
  }

  .top_menu:before {
    content: '';
    width: 0px;
    height: 0px;
    left: 64px;
    top: -18px;
    position: absolute;
    /*background: red;*/
    border: 9px solid transparent;
    border-bottom: 9px solid #fff;
  }


</style>
